<template>
  <div id="mycheckbox">
    <p>单个复选框：</p>
    <input type="checkbox" id="checkbox" v-model="checked">
    <label for="checkbox">{{ checked }}</label>
    <p>多个复选框：</p>
    <p>父级传递的值： {{myValue}}</p>
    <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
    <label for="runoob">Runoob</label>
    <input type="checkbox" id="google" value="Google" v-model="checkedNames">
    <label for="google">Google</label>
    <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
    <label for="taobao">taobao</label>
    <br>
    <span>选择的值为: {{ checkedNames }}</span>
  </div>
</template>

<script>
export default {
  //可以通过一个对象的方式接收父级发送过来的数据，指定接收类型
  //my-value 在使用的时候会默认转换为驼峰命名格式 myValue 来使用
  props: {
    'my-value':[Number,String]
  },
  name: 'mycheckbox',
  data () {
    return {
      checked : false,
      checkedNames: []
    }
  }
}
</script>
